<script setup>


//改变选择的数据库
import {computed, ref} from "vue";
import {AddIcon} from "tdesign-icons-vue-next";
import {Button, Checkbox, Input, MessagePlugin, Radio} from "tdesign-vue-next";

const changeSelectedPool = (context) => {
  const {node} = context
  console.log(context)
}

// 所有连接数据
const linkItems = ref([
  {
    label: 'cert',
    type: 'link',
    children: [
      {
        label: 'sys',
        type: 'pool',
        children: [
          {
            label: "sys_config",
            value: '111',
            type: 'scheme'
          }
        ]
      }
    ],
  }
]);


const align = ref('left');
const data = ref([]);

// 用于控制哪些行或哪些单元格不允许出现编辑态，参数有 { row, col, rowIndex, colIndex }
const editableCellState = (cellParams) => {
  // 第一行不允许编辑
  const {row} = cellParams;
  return row.status !== 2;
};

const tableRef = ref();
// 用于提交前校验数据（示例代码有效，勿删）
const validateTableData = () => {
  // 仅校验处于编辑态的单元格
  tableRef.value.validateTableData().then((result) => {
    console.log('validate result: ', result);
  });
};

const columns = computed(() => [
  {
    title: '名',
    colKey: 'name',
    align: align.value,
    // 编辑状态相关配置，全部集中在 edit
    edit: {
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: Input,
      // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
      props: {
        clearable: true,
        autofocus: true,
      },
      // 触发校验的时机（when to validate)
      validateTrigger: 'change',
      // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
      on: (editContext) => ({
        onBlur: () => {
          console.log('失去焦点', editContext);
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ['onEnter'],
      // 编辑完成，退出编辑态后触发
      onEdited: (context) => {
        console.log(context);
        const newData = [...data.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        data.value = newData;
        console.log('Edit firstName:', context);
        MessagePlugin.success('修改成功');
      },
      // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      rules: [
        {required: true, message: '不能为空'},
      ],
      // 默认是否为编辑状态
      defaultEditable: true,
    },
  },
  {
    title: '类型',
    colKey: 'category',
    align: align.value,
    // 编辑状态相关配置，全部集中在 edit
    edit: {
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: Input,
      // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
      props: {
        clearable: true,
        autofocus: true,
      },
      // 触发校验的时机（when to validate)
      validateTrigger: 'change',
      // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
      on: (editContext) => ({
        onBlur: () => {
          console.log('失去焦点', editContext);
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ['onEnter'],
      // 编辑完成，退出编辑态后触发
      onEdited: (context) => {
        console.log(context);
        const newData = [...data.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        data.value = newData;
        console.log('Edit firstName:', context);
        MessagePlugin.success('修改成功');
      },
      // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      rules: [
        {required: true, message: '不能为空'},
      ],
      // 默认是否为编辑状态
      defaultEditable: true,
    },
  },
  {
    title: '长度',
    colKey: 'length',
    align: align.value,
    // 编辑状态相关配置，全部集中在 edit
    edit: {
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: Input,
      // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
      props: {
        clearable: true,
        autofocus: true,
      },
      // 触发校验的时机（when to validate)
      validateTrigger: 'change',
      // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
      on: (editContext) => ({
        onBlur: () => {
          console.log('失去焦点', editContext);
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ['onEnter'],
      // 编辑完成，退出编辑态后触发
      onEdited: (context) => {
        console.log(context);
        const newData = [...data.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        data.value = newData;
        console.log('Edit firstName:', context);
        MessagePlugin.success('修改成功');
      },
      // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      rules: [
        {required: true, message: '不能为空'},
      ],
      // 默认是否为编辑状态
      defaultEditable: true,
    },
  },
  {
    title: '小数点',
    colKey: 'point',
    align: align.value,
    // 编辑状态相关配置，全部集中在 edit
    edit: {
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: Input,
      // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
      props: {
        clearable: true,
        autofocus: true,
      },
      // 触发校验的时机（when to validate)
      validateTrigger: 'change',
      // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
      on: (editContext) => ({
        onBlur: () => {
          console.log('失去焦点', editContext);
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ['onEnter'],
      // 编辑完成，退出编辑态后触发
      onEdited: (context) => {
        console.log(context);
        const newData = [...data.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        data.value = newData;
        console.log('Edit firstName:', context);
        MessagePlugin.success('修改成功');
      },
      // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      rules: [
        {required: true, message: '不能为空'},
      ],
      // 默认是否为编辑状态
      defaultEditable: true,
    },
  },
  {
    title: '不是null',
    colKey: 'notNull',
    align: 'center',
    cell: (h, { row }) => h( Checkbox,{checked:row.notNull}),
    // 编辑状态相关配置，全部集中在 edit
    edit: {
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: Checkbox,
      // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
      props: {
        clearable: true,
        autofocus: true,
      },
      // 触发校验的时机（when to validate)
      validateTrigger: 'change',
      // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
      on: (editContext) => ({
        onBlur: () => {
          console.log('失去焦点', editContext);
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ['onEnter'],
      // 编辑完成，退出编辑态后触发
      onEdited: (context) => {
        console.log(context);
        const newData = [...data.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        data.value = newData;
        console.log('Edit firstName:', context);
        MessagePlugin.success('修改成功');
      },
      // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      rules: [
        {required: true, message: '不能为空'},
      ],
      // 默认是否为编辑状态
      defaultEditable: true,
    },
  },
  {
    title: '虚拟',
    colKey: 'fictitious',
    align: 'center',
    cell: (h, { row }) => h( Checkbox,{checked:row.fictitious}),
    // 编辑状态相关配置，全部集中在 edit
    edit: {
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: Checkbox,
      // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
      props: {
        clearable: true,
        autofocus: true,
      },
      // 触发校验的时机（when to validate)
      validateTrigger: 'change',
      // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
      on: (editContext) => ({
        onBlur: () => {
          console.log('失去焦点', editContext);
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ['onEnter'],
      // 编辑完成，退出编辑态后触发
      onEdited: (context) => {
        console.log(context);
        const newData = [...data.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        data.value = newData;
        console.log('Edit firstName:', context);
        MessagePlugin.success('修改成功');
      },
      // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      rules: [
        {required: true, message: '不能为空'},
      ],
      // 默认是否为编辑状态
      defaultEditable: true,
    },
  },
  {
    title: '键',
    colKey: 'key',
    align: 'center',
    cell: (h, { row }) => h( Checkbox,{checked:row.key}),
    // 编辑状态相关配置，全部集中在 edit
    edit: {
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: Checkbox,
      // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
      props: {
        clearable: true,
        autofocus: true,
      },
      // 触发校验的时机（when to validate)
      validateTrigger: 'change',
      // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
      on: (editContext) => ({
        onBlur: () => {
          console.log('失去焦点', editContext);
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ['onEnter'],
      // 编辑完成，退出编辑态后触发
      onEdited: (context) => {
        console.log(context);
        const newData = [...data.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        data.value = newData;
        console.log('Edit firstName:', context);
        MessagePlugin.success('修改成功');
      },
      // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      // 默认是否为编辑状态
      defaultEditable: true,
    },
  },
  {
    title: '注释',
    colKey: 'comment',
    align: align.value,
    // 编辑状态相关配置，全部集中在 edit
    edit: {
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: Input,
      // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
      props: {
        clearable: true,
        autofocus: true,
      },
      // 触发校验的时机（when to validate)
      validateTrigger: 'change',
      // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
      on: (editContext) => ({
        onBlur: () => {
          console.log('失去焦点', editContext);
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ['onEnter'],
      // 编辑完成，退出编辑态后触发
      onEdited: (context) => {
        console.log(context);
        const newData = [...data.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        data.value = newData;
        console.log('Edit firstName:', context);
        MessagePlugin.success('修改成功');
      },
      // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      rules: [
        {required: true, message: '不能为空'},
      ],
      // 默认是否为编辑状态
      defaultEditable: true,
    },
  },
]);

const newRow = () => {
  let zrw = {
    name: '',
    category: "",
    length: '',
    point: '',
    notNull:false,
    fictitious:false,
    key:'',
    comment:''
  }
  data.value.push(zrw)
}

// tab索引
const tabIndex = ref(1)

</script>

<template>
  <t-card title="新增数据表" :bordered="false" hover-shadow :style="{ width: '100%' }">
    <t-space direction="vertical">
      <t-select
          label="选择数据库:"
          placeholder="请选择"
          :popup-props="{ overlayClassName: 'tdesign-demo-select__overlay-option' }"
      >
        <template v-for="(link,index1) in linkItems" :key="index1">
          <template v-for="(pool,index2) in link.children" :key="index2">
            <t-option v-for="(scheme,index3) in pool.children" :key="index3"
                      :value="link.label+'->'+pool.label+'->'+scheme.label"
                      :label="link.label+'->'+pool.label+'->'+scheme.label"></t-option>
          </template>
        </template>
      </t-select>

      <t-input label="数据表名:"/>

      <!--      键设置-->

      <t-tabs v-model="tabIndex">

        <t-tab-panel :value="1" label="字段" :destroy-on-hide="false">
          <t-table
              ref="tableRef"
              row-key="key"
              :columns="columns"
              :data="data"
              :editable-cell-state="editableCellState"
              :bordered="true"
              lazy-load
          />
          <t-button theme="primary" style="margin-top: 10px" @click="newRow">
            <template #icon>
              <add-icon/>
            </template>
            添加字段
          </t-button>
        </t-tab-panel>
        <t-tab-panel :value="2" label="选项卡2" :destroy-on-hide="false">
          <template #panel>
            <p style="padding: 25px">选项卡2的内容，使用 t-tab-panel 渲染</p>
          </template>
        </t-tab-panel>
        <t-tab-panel :value="3" label="选项卡3" :panel="panelRender"/>
      </t-tabs>

    </t-space>
  </t-card>


</template>

<style scoped>

</style>
